<template>
    <div>
        <div class="box-a"></div>
    </div>
</template>


<script>
export default {};

</script>
<style scoped>
.box-a{
    width: 100px;
    height: 100px;
    background: rgb(231, 5, 201);
    position: relative;
    animation: myframe 5s infinite;
    border-radius:50px;
}

@keyframes myframe {
    0%{
        background: pink;
        top:0px;
        left:0px;
    }
    25%{
        background: green;
        top:200px;
         left:0px;
    }
     50%{
        background: red;
        top:200px;
        left: 200px;
    }
    75%{
        background: blueviolet;
        top:0px;
        left: 200px;
    }
    100%{
        background: pink;
        top:0px;
         left: 0px;
    }
}

</style>